import { useLayoutEffect, useState } from 'react';
import { Mask } from 'antd-mobile';
import clsx from 'clsx';
import styles from './index.module.less';
import { CopyToClipboard } from 'react-copy-to-clipboard';
import { Button, Space, Toast } from 'antd-mobile'

interface Props {
  visible: boolean;
  onClose: (value?: number) => void;
}

const GameRulesMask: React.FC<Props> = ({ visible, onClose }) => {

  return (
    <Mask
      opacity={0.8}
      visible={visible}
      onMaskClick={() => onClose()}
    >
      <div
        className={styles.GameRulesMask}
      >
        <div className={styles.titleBox}>
          Game Rules
          <i className={styles.icon} onClick={() => { onClose() }}></i>
        </div>
        <div className={styles.content}>
          <div className={styles.flexBox}>
            <div className={styles.logo}></div>
            Mines
          </div>
          <ul>

            <li>
              A goal of the game is to reveal stars and avoid mines. With each
              revealed star, payout multiplier increases. Tiles can be revealed by
              selecting certain tile or clicking “pick randomply” button;
            </li>
            <li>
              Player can cash out winnings at any time by clicking “Cash out”
              button;
            </li>
            <li>
              Number of mines per field can be adjusted from dropdown. This
              affects game odds and bet multiplier;
            </li>
            <li>
              The maximum winning odds for this game are 5044291X. However, the
              maximum win is limited by the operator and can be accessed from the
              “Game Limits” section in the menu.
            </li>
          </ul>
          <hr />
          <h5>GAME INTERFACE</h5>
          <ul>
            <li>
              Bets can be made from the bet panel, by selecting predefined bet
              amounts. Click (-) and (+) buttons to move
              between bet options;
            </li>
            <li>
              Player balance shows available funds to play;
            </li>
            <li>
              Sound can be turned off and back on from game menu;
            </li>
            <li>
              Bet history can be accessed from game menu;
            </li>
            <li>
              Game information and rules can be accessed from game menu;
            </li>
            <li>
              Provably Fair settings can be accessed from game help page or game round details page.
            </li>
          </ul>
          <hr />
          <h5>AUTO PLAY</h5>
          <ul>
            <li>
              Auto Play is activated by pressing the “Auto Game” button. To
              continue tiles on the board should be selected;
            </li>
            <li>
              Auto play settings are activated by pressing “Auto Play” button, if
              tiles are selected on the board;
            </li>
            <li>
              In the Auto Play panel, the “Stop if cash decreases by” option stops
              Auto Play, if the balance is decreased by the selected amount.
            </li>
            <li>
              In the Auto Play panel, the “Stop if single win exceeds” option
              stops Auto Play, if a single win exceeds the selected amount.
            </li>
            <li>
              In the Auto Play panel, the “Stop if cash increases by” option stops
              Auto Play, if the balance is increased by the selected amount.
            </li>
            <li>
              After start, remaining number of rounds is displayed on the counter.
              The player can stop Auto Play at any time, by clicking the counter.
            </li>
          </ul>
          <hr />
          <h5>ADDITIONAL INFORMATION</h5>
          <ul>

            <li>
              In the event of a malfunction of the gaming hardware/software, all
              affected game bets and payouts are rendered void and all affected
              bets are refunded.
            </li>
            <li>
              If the internet connection is interrupted when the bet is active,
              the game will auto cash out with the current multiplier, and the
              winning amount will be added to your balance.
            </li>
          </ul>
        </div>
      </div>
    </Mask>
  );
};

export default GameRulesMask;
